<!--
 * @Description: 内置指令
 * @Author: zzj
 * @Date: 2021-10-09 09:49:54
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-10 17:12:52
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>内置指令</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>

<body>
	<div id="app">
		<div>备忘录</div>
		<form v-on:submit.prevent="submitHandler">
			<input type="text" v-model="todo.content">
			<input type="submit" value="提交">
		</form>
		<ul>
			<li v-for="todo in todos" :key="todo.id">
				{{todo.content}}
				<span>{{todo.status}}</span>
				<button @click="delHandler(todo)">删除</button>
			</li>
		</ul>
		<div v-html="answer"></div>
	</div>
	<script>
		class Todo{
			id;
			content;
			status;
			constructor(id, content, status) {
				this.id = id;
				this.content = content;
				this.status = status;
			}
		}
		new Vue({
			el: "#app",
			data:{
				todos:[],
				todo:{},
				answer:`
				<p>
					function foo(){

					}
				</p>
				`
			},
			methods: {
				submitHandler(){
					//将todo对象完善
					let d = {
						id:new Date().getTime(),
						status:"未完成"
					}
					let todo = Object.assign({},this.todo,d);
					this.todos.push(todo);
					this.todo = {}
					this.refreshHandler();
				},
				//删除数据
				delHandler(row){
					let todos = this.todos;
					_.remove(todos,item=>item.id === row.id);
					this.todos = [...todos];
					this.refreshHandler();
				},
				refreshHandler(){
					//将todos缓存到浏览器
					localStorage.setItem('todos', JSON.stringify(this.todos))
				}
			},
			created() {

			},
			mounted() {
				//读取缓存系统中的数据
				let todos = JSON.parse(localStorage.getItem("todos"));
				this.todos = todos ? todos : [];
			},
		})
	</script>
</body>

</html>